<template>
  <div>
    <mu-list-item avatar :ripple="false" button>
      <mu-list-item-action>
        <ItemImg :src="data.img" />
      </mu-list-item-action>
      <mu-list-item-content>
        <mu-list-item-title>{{ data.label }}</mu-list-item-title>
        <mu-list-item-sub-title>
          {{ data.desc }}
        </mu-list-item-sub-title>
        <div class="price-wrapper">
          ￥<span class="price-text">{{ data.price }}</span>
        </div>
      </mu-list-item-content>
      <mu-list-item-action v-if="showAddBtn">
        <mu-button class="add-icon-btn" icon @click="addToShoppingList(data)">
          <mu-icon class="add-icon" value="add"></mu-icon>
        </mu-button>
      </mu-list-item-action>
    </mu-list-item>
    <mu-divider></mu-divider>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import ItemImg from "@/components/ItemImg/index.vue";
export default {
  name: "PackageItem",
  components: {
    ItemImg,
  },
  props: {
    data: Object,
    showAddBtn: Boolean,
  },
  methods: {
    ...mapMutations(["add"]),
    addToShoppingList(data) {
      this.add(data);
    },
  },
};
</script>

<style scoped>
.add-icon-btn {
  width: 16px;
  height: 16px;
  background: #52a5f8;
}
.add-icon {
  color: white;
  font-size: 20px;
}
.price-wrapper {
  vertical-align: -6px;
  color: #eb4d4d;
}
.price-text {
  font-weight: bold;
  font-size: 1.1em;
}
</style>
